<!-- systemSet -->
<template>
  <div class="dictionary content_box">
    <div class="header_row flex align-center flex-wrap" v-if="hasBtn('dictionary:query')">
      <div class="flex align-center m-r-2">
        <span class="tit_span nowarp">模块：</span>
        <el-input
          v-model="searchObj.SModule"
          clearable
          placeholder="管理模块设定的名称"
        ></el-input>
      </div>

      <div class="flex align-center m-r-2">
        <span class="tit_span nowarp">功能：</span>
        <el-input
          v-model="searchObj.SFunction"
          placeholder="功能名称"
          clearable
        ></el-input>
      </div>
      <el-button type="primary" @click="searchThem()">查询</el-button>
    </div>

    <div class="m-b-1 neck_box flex align-center space-between">
      <div>
        <el-button type="success" @click="showDialog('add')"
          >新增数据</el-button
        >
        <!-- <el-button type="danger">批量删除</el-button> -->
        <el-button type="warning" disabled v-if="hasBtn('dictionary:export')">导出列表</el-button>
      </div>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="searchObj.currentPage"
        @size-change="handleSizeChange"
        :page-size="10"
        layout="total,sizes, prev, pager, next, jumper"
        :total="pageTotal"
      >
      </el-pagination>
    </div>
    <el-table
      class="m-b-1"
      :data="tableData"
      border
      stripe
      style="width: 100%"
      v-loading="tableLoading"
      sortable="custom"
      @sort-change="sortChange"
    >
      <el-table-column prop="index" label="序号" align="center" fixed>
      </el-table-column>
      <el-table-column
        prop="Smodule"
        label="模块"
        width="180"
        align="center"
        sortable
      >
      </el-table-column>
      <el-table-column
        prop="Sfunction"
        label="功能"
        width="180"
        align="center"
        sortable
      >
      </el-table-column>
      <el-table-column
        prop="Skey"
        label="key键"
        width="180"
        align="center"
        sortable
      >
      </el-table-column>
      <el-table-column
        prop="Svalue"
        label="值"
        width="180"
        align="center"
        sortable
      >
      </el-table-column>
      <el-table-column
        prop="Sdesc"
        label="描述"
        width="180"
        align="center"
        sortable
      >
      </el-table-column>
      <el-table-column
        prop="Remark"
        label="备注"
        width="180"
        align="center"
        sortable
      >
      </el-table-column>
      <el-table-column
        prop="UpdateDate"
        label="修改时间"
        width="180"
        align="center"
        sortable
      >
      </el-table-column>
      <el-table-column label="是否有效" align="center" sortable>
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.IsActive"
            :disabled="!hasBtn('dictionary:active')"
            @change="switchChange(scope.row.Id, scope.row.IsActive)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="220" fixed="right"
        v-if="hasBtn('dictionary:edit') || hasBtn('dictionary:delete')"
      >
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" v-if="hasBtn('dictionary:edit')" type="primary"
            >编辑</el-button
          >

          <el-button
            size="mini"
            v-if="hasBtn('dictionary:delete')"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
      destroy-on-close
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="addObj"
        label-position="right"
        label-width="80px"
      >
        <el-form-item label="模块：" prop="SModule">
          <el-input
            class="flex-1"
            v-model="addObj.SModule"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="功能：" prop="SFunction">
          <el-input
            class="flex-1"
            v-model="addObj.SFunction"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="Key值：" prop="SKey">
          <el-input
            class="flex-1"
            v-model="addObj.SKey"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="值：" prop="SValue">
          <el-input
            class="flex-1"
            v-model="addObj.SValue"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述：" prop="Sdesc">
          <el-input
            class="flex-1"
            v-model="addObj.Sdesc"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="Remark">
          <el-input
            type="textarea"
            class="flex-1"
            v-model="addObj.Remark"
            placeholder="请输入内容"
            maxlength="30"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCodeMasterList, saveCodeMaster, deleteCodeMaster, validCodeMaster } from '@/api/system/dictionary'
export default {
  //import引入的组件需要注入到对象中才能使用
  name: 'dictionary',
  components: {},
  data () {
    //这里存放数据
    return {
      dialogVisible: false,
      searchObj: {
        SModule: "",
        SFunction: "",
        currentPage: 1,
        PageSize:10,
      },
      addObj: {
        Id: "00000000-0000-0000-0000-000000000000",
        SModule: "",
        SFunction: "",
        SKey: "",
        SValue: "",
        Sdesc: "",
        Remark: ""
      },
      SModuleOption: [],
      tableData: [
        { isActive: true }
      ],
      pageTotal: 0,
      tableLoading: false,
      dialogType: 'add',
      rules: {
        SModule: [
          { required: true, message: '必填', trigger: 'blur' },
        ],
        SFunction: [
          { required: true, message: '必填', trigger: 'blur' },
        ],
        SKey: [
          { required: true, message: '必填', trigger: 'blur' },
        ],
        SValue: [
          { required: true, message: '必填', trigger: 'blur' },
        ]
      }
    };
  },
  //监听属性 类似于data概念
  computed: {
    dialogTitle () {
      return this.dialogType == 'add' ? '新增数据' : '编辑数据'
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    switchChange (id, IsActive) {
      validCodeMaster({ Id: id }).then(_ => {
        this.$notify({
          title: '切换成功',
          message: 'success',
          type: 'success',
          duration: 2000
        })
        this.getCodeMasterListFun()
      })
    },
    showDialog (type) {
      if (type == 'add') {
        this.addObj = {
          Id: "00000000-0000-0000-0000-000000000000",
          SModule: "",
          SFunction: "",
          SKey: "",
          SValue: "",
          Sdesc: "",
          Remark: ""
        }
      }
      this.dialogType = type
      this.dialogVisible = true

    },
    saveData () {
      for (let item in this.addObj) {
        if (['Remark'].includes(item)) continue
        if (!this.addObj[item] && this.addObj[item] !== 'Number') {
          this.$notify({
            title: '提示',
            message: '请填写完整信息',
            type: 'warning',
            duration: 2000
          })
          return
        }
      }

      saveCodeMaster(this.addObj).then(res => {
        this.$notify({
          title: '保存成功',
          message: 'success',
          type: 'success',
          duration: 2000
        })
        this.dialogVisible = false
        this.getCodeMasterListFun()
      }).catch(err => {

      })
    },
    handleCurrentChange (e) {
      this.searchObj.currentPage = e
      this.getCodeMasterListFun()
    },
    searchThem () {
      this.searchObj.currentPage = 1
      this.getCodeMasterListFun()
    },
    handleEdit (index, row) {
      console.log(row)
      this.addObj = {
        Id: row.Id,
        SModule: row.Smodule,
        SFunction: row.Sfunction,
        SKey: row.Skey,
        SValue: row.Svalue,
        Sdesc: row.Sdesc,
        Remark: row.Remark
      }
      this.showDialog('edit')
    },
    handleDelete (index, row) {
      this.$confirm('确认删除此条数据吗？').then(_ => {
        let obj = {
          Id: row.Id
        }
        deleteCodeMaster(obj).then(res => {

          this.$notify({
            title: '删除成功',
            message: 'success',
            type: 'success',
            duration: 2000
          })
          this.tableData.splice(index, 1)
          this.pageTotal -= 1
        })
      })


    },
    sortChange (e) {
      let SortType = false
      if (e.order == "ascending") {
        SortType = true
      }
      this.getCodeMasterListFun(e.prop, SortType)
    },
    handleSizeChange(e){
      this.searchObj.currentPage =1 
      this.searchObj.PageSize = e
      this.getCodeMasterListFun()
    },
    getCodeMasterListFun (SortName = 'CreateDate', SortType = true) {
      let currentPage = this.searchObj.currentPage
      this.tableLoading = true
      let obj = {
        "SModule": this.searchObj.SModule, //	模块：指定整体管理模块设定
        "SFunction": this.searchObj.SFunction, //功能：指定整体管理模块下的某功能设定
        "IsPaging": true, //是否分页
        'PageSize':this.searchObj.PageSize,
        "SortName": SortName, //排序栏位
        "SortType": SortType,//排序类型｛True：正序；Flase：反序｝
        'PageIndex': currentPage
      }
      getCodeMasterList(obj).then(res => {
        this.tableData = res.Data.map((item, index) => {
          for (let cell in item) {
            if (!item[cell]) {
              item[cell] = '-'
            }
          }
          return { ...item, index: (index + 1) + ((currentPage - 1) * 10) }
        })
        this.pageTotal = res.Total
        this.tableLoading = false
      }).catch(_ => {
        this.tableLoading = false
        this.tableData = []
        this.pageTotal = 0
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.getCodeMasterListFun()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
//@import url(); 引入公共css类
<style  scoped>
.dictionary .tit_span {
  width: 60px;
}
</style>